import React from 'react';
import { TabBar } from 'antd-mobile'
import Routerview from '../../router/routerView';
import { NavLink, useHistory, useLocation } from 'react-router-dom'
const Index = (props) => {
  const { routes } = props
  const history = useHistory()
  const location = useLocation()
  
  const toUrl = (pathname) => {
    history.push({ pathname, })
  }

  return (
    <div>
      <Routerview routes={routes}></Routerview>
      <div style={{ position: 'fixed', bottom: 0, width: '100%'  }}>
        <TabBar onChange={toUrl} defaultActiveKey={location.pathname}>
          {routes.map((item, i) => (
            <TabBar.Item key={item.path} title={item.name} ></TabBar.Item>
          ))}
        </TabBar>
      </div>
    </div>
  );
}

export default Index;
